<template>
  <page-frame>
    <div class="check02-in-main" style="vertical-align: top">
      <div class="toptitle">
        <!--
        <div class="left">会员入住 - 入住评估</div>
         -->
        <div class="left">会员入住 - {{currentMemberObj.memberName}}</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="next">下一步</el-button>
            <el-button @click="back">返&nbsp回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="step-show" @click="showStep">
        <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
        <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
        {{show}}
      </div>
      <div class="stepbar" v-show="isShowStep">
        <stepCheckIn :stepData="currentView"
                     :currentMemberObj="currentMemberObj"
                     @updateOption="getView"
        ></stepCheckIn>
      </div>
      <div class="tabs">
        <ul class="tabsTitle tabs-view">
          <li :class="{selected:currentView==='medicalReport'}" @click="changeTabs('medicalReport')">体检报告</li>
          <li :class="{selected:currentView==='ability'}" @click="changeTabs('ability')">入住能力评估</li>
          <li :class="{selected:currentView==='planMake'}" @click="changeTabs('planMake')">制定服务计划</li>
          <li :class="{selected:currentView==='bedSpace'}" @click="changeTabs('bedSpace')">床位预约</li>
        </ul>
        <div class="tabsContent">
          <component v-bind:is="currentView" :member="currentMemberObj" :currentTasId="currentTasId"
                     :runId="currentMemberObj.runId" :isChange="false" @goto="goto"></component>
        </div>
      </div>
    </div>
  </page-frame>
</template>


<script>
  import medicalReport from '../../components/assessment/medicalReport';
  import ability from '../../components/assessment/ability';
  import bedSpace from '../../components/room/reserveBedContainer';
  import planMake from '../../components/assessment/planMake';
  import stepCheckIn from '../../components/stepbar/checkIn.vue';
  import checkInApi from '../../service/member/checkInApi';
  import commonApi from '../../service/member/commonApi';

  export default {
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        if (typeof this.currentMemberObj == "object") {
          this.schedule();
          this.loadFinishedSteps();
        } else {
          this.$router.push({name: 'memberCheckIn'});
        }
      },
      /**
       * 加载已完成步骤
       */
      loadFinishedSteps(){
        let self = this;
        commonApi.getResolvedSteps(this.currentMemberObj.actId).then(function (response) {
          self.finishedSteps = response.data.data;
        })
      },
      /**
       * 加载当前步骤
       */
      loadCurrentSteps(taskKey){
        let self = this;
        commonApi.getCurrentSteps(this.currentMemberObj.actId).then(function (response) {
          self.currentTasks = response.data.data;
          self.getCurrentTasId(taskKey);
        })
      },

      /**
       *流程进度
       */
      schedule(){
        let self = this;
        switch (this.currentMemberObj.taskKeyArr[0]) {
          case "inApply_examination":
            this.currentView = "medicalReport";
            break;
          case "inApply_InAssessment":
            this.currentView = "ability";
            break;
          case "inApply_servicePlan":
            this.currentView = "planMake";
            break;
          case "inApply_bedAppointment":
            this.currentView = "bedSpace";
            break;
        }
        self.currentTasId = self.currentMemberObj.taskIdArr[0];
      },

      goto(taskKey){
        switch (taskKey) {
          case "inApply_examination":
            this.currentView = "medicalReport";
            break;
          case "inApply_InAssessment":
            this.currentView = "ability";
            break;
          case "inApply_servicePlan":
            this.currentView = "planMake";
            break;
          case "inApply_bedAppointment":
            this.currentView = "bedSpace";
            break;
        }
        this.loadCurrentSteps(taskKey);
      },
      changeTabs(tabName){
        this.oCurrentView =  this.currentView;
        this.currentView = tabName;
        switch (this.currentView) {
          case "medicalReport":
            this.backCurrentView = "inApply_examination";
            break;
          case "ability":
            this.backCurrentView = "inApply_InAssessment";
            break;
          case "planMake":
            this.backCurrentView = "inApply_servicePlan";
            break;
          case "bedSpace":
            this.backCurrentView = "inApply_bedAppointment";
            break;
        }
        this.getCurrentTasId(this.backCurrentView);
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
      /**
       *获取当前选中类目的tasId
       */
      getCurrentTasId(taskKey){
        let self = this;
        var contain = false;
        self.currentTasId = 0;
        for (var i = 0; i < self.currentMemberObj.taskKeyArr.length; i++) {
          var key = self.currentMemberObj.taskKeyArr[i];
          if (key == taskKey) {
            contain = true;
            self.currentTasId = self.currentMemberObj.taskIdArr[i];
          }
        }
        if(!contain){
          self.finishedSteps.forEach(function(step){
            if(step.taskKey === taskKey){
              contain = true;
            }
          });
        }
        if(!contain){
          self.currentTasks.forEach(function(step){
            if(step.taskKey === taskKey){
              contain = true;
              self.currentTasId = step.taskId;
            }
          });
        }
        if (!contain) {
          this.currentView = this.oCurrentView;
          self.$message({
            type: 'info',
            message: '请完成当前步骤!'
          });
        }
      },
      getView(val){
        this.currentView = val;
      },
      next(){
        let self = this;
        commonApi.getFlowRouter("inApply",this.currentMemberObj.actId).then(function (response) {
           if(response.data.status!=200){
             var routerKey = response.data.data.routerKey;
             var errorMsg='';
             if(routerKey=='inApply_examination'){
               errorMsg='体检报告未完成';
             }else if(routerKey=='inApply_InAssessment'){
               errorMsg='入住评估未完成';
             }else if(routerKey=='inApply_servicePlan'){
               errorMsg='服务计划未完成';
             }else if(routerKey=='inApply_bedAppointment'){
               errorMsg='床位预约未完成';
             }
             if(errorMsg!=''){
               self.$message({
                 type: 'error',
                 message: errorMsg
               });
             }else{
               self.$router.push({name: "checkInProcess03"});
             }
           }else{
             self.$router.push({name: "checkInProcess03"});
           }
        });
      },
      back(){
        this.$router.push({name: 'memberCheckIn'});
      }
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        currentTasId: 0,
        currentRunId: 0,
        currentMemberObj: {},
        stepData: 5,
        oCurrentView:'',
        currentView: "",
        backCurrentView: "",
        finishedSteps:[],
        currentTasks:[],
        isShowStep:false,
        show:"显示流程图",
      }
    },
    components: {
      ability,
      medicalReport,
      bedSpace,
      planMake,
      stepCheckIn
    }
  }
</script>
<style>
  .tabs {
    width: 100%;
  }

  .tabs .tabsTitle {
    font-size: 0px;
    margin-bottom: 15px;
  }

  .tabs .tabsTitle.tabs-view > li {
    font-size: 14px;
    display: inline-block;
    background-color: #a8a8b0;
    width: 24.5%;
    padding-top: 10px;
    padding-bottom: 10px;
    border-left: 1px solid #ffffff;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
  }

  .tabs li.selected {
    background-color: #3fc6d2 !important;
  }

  .tabs .tabsContent {
    width: 98.3%;
  }


  .check02-in-main .stepbar {
    margin-top: 66px;
  }

  .el-tabs__item {
    font-weight: bolder;
    font-size: 16px;
  }

  .el-form {

  }

  .el-col-12 {
    position: relative;
  }

  .check02-in-main .btns {
    float: right;
  }

  .el-input {
    width: 80%;
  }

  .input input {
    display: inline-block;
  }

  .el-icon-caret-top:before {
    content: "\E607" !important;
  }

  .el-select {
    display: block;
    position: relative;
  }

  .el-select .el-input .el-input__icon {
    top: 50% !important;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }

</style>
